<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>点微博数据</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="proj4,mapv" src="./static/libs/include-leaflet-local.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([29.578285, 106.563777], 5);
    L.tileLayer('https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
        attribution: '<a href="#">MapGIS</a>',
        maxZoom: 18,
        id: 'mapbox.dark'
      }).addTo(map);

    var randomCount = 500;
    var data = [];
    while (randomCount--) {
      data.push({
        geometry: {
          type: 'Point',
          coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20]
        },
        count: 30 * Math.random()
      });
    }

    var dataSet = new mapv.DataSet(data);

    var options = {
      fillStyle: 'rgba(55, 50, 250, 0.8)',
      size: 40,
      globalAlpha: 0.5,
      label: {
        show: true,
        fillStyle: 'white',
        shadowColor: 'yellow',
        font: '15px Arial',
        shadowBlur: 10
      },
      gradient: {
        0: "rgba(49, 54, 149, 0)",
        0.2: "rgba(69,117,180, 0.7)",
        0.3: "rgba(116,173,209, 0.7)",
        0.4: "rgba(171,217,233, 0.7)",
        0.5: "rgba(224,243,248, 0.7)",
        0.6: "rgba(254,224,144,0.7)",
        0.7: "rgba(253,174,97,0.7)",
        0.8: "rgba(244,109,67,0.8)",
        0.9: "rgba(215,48,39,0.8)",
        0.95: "rgba(165, 0, 38,0.8)"
      },
      shadowColor: 'rgba(255, 255, 50, 1)',
      shadowBlur: 10,
      max: 100,
      draw: 'grid'
    }
    var mapvLayer = new L.zondy.MapvLayer(map, dataSet, options).addTo(map);
  </script>


</body>

</html>